<template>
	<view class="lottery">
		<view class="topEaBg"></view>
		<view class="jiangEa text-center text-white padding margin" >
			<view class="padding">
				<view class="total text-center padding radius text-xl">总奖池：<text
						class="text-bold text-xxl text-red margin-right-sm">6666</text>积分</view>
			</view>
			<view class="flex justify-around" style="align-items: flex-end;">
				<view class="item ">
					<image class="img" src="../../../static/newVer/index/jiang2.png" mode="aspectFill"></image>
					<view class="text-bold text-lg margin-top-sm">1000积分</view>
					<view class="cuIcon-paint margin-top-xs text-white">二等奖</view>
				</view>
				<view class="item ">
					<image class="img" src="../../../static/newVer/index/jiang1.png"></image>
					<view class="text-bold text-xxl margin-top-sm">1000积分</view>
					<view class="cuIcon-paint margin-top-xs text-white">一等奖</view>
				</view>
				<view class="item ">
					<image class="img" src="../../../static/newVer/index/jiang3.png"></image>
					<view class="text-bold text-lg margin-top-sm">1000积分</view>
					<view class="cuIcon-paint margin-top-xs text-white">三等奖</view>
				</view>
			</view>
			
		</view>
		<view>
			<view class="conl_btn">
				<view class="conlbtn">
					<view class="conlbtncenter">
						<view>立即参与</view>
					</view>
					<view class="conlitem"></view>
					<view class="conlitem"></view>
					<view class="conlitem"></view>
				</view>
			</view>
		</view>

		<view class="margin bg-white round padding-sm text-yellow">开奖时间：2024-05-19 20:00:00</view>


		<view class="list-scall bg-white margin" style="border-radius: 10rpx;">
			<base-scroll-list :rowsDataProps="rowsData"></base-scroll-list>
		</view>
		<view class="rightEa">
			<view @click="ruleClick" class="cu-tag radius text-red text-bold bg-white" style="width: 100% ;border-radius: 50rpx 2rpx 2rpx 50rpx;">规&nbsp;&nbsp;则</view>
			<br/>
			<view @click="recordClick" class="cu-tag radius text-red text-bold bg-white margin-top" style="border-radius: 50rpx 2rpx 2rpx 50rpx;">中奖记录</view>
		</view>
	</view>
</template>

<script>
	import comTitle from "../../../components/comTitle.vue"
	import baseScrollList from '@/components/baseScrollList.vue'
	export default {
		components: {
			comTitle,
			baseScrollList
		},
		data() {
			return {
				// 奖品列表，
				rowsData: [],
				prizeList: [{
						id: 'coupon88',
						name: '8.8折',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
					},
					{
						id: 'coupon900',
						Color: 'rgb(251, 219, 216)',
						name: '900',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
					},
					{
						id: 'coupon1',
						name: '1元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
					},
					{
						id: 'apple',
						Color: 'rgba(246, 142, 46, 0.5)',
						name: '苹果手机',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
					},
					{
						id: 'coupon210',
						name: '210元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
					},
					{
						id: 'jd100',
						name: '100京豆',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
					},
					{
						id: 'coupon400',
						name: '400元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
					},
					{
						id: 'thanks',
						name: '谢谢参与',
						img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png',
					}
				],
			}
		},
		mounted() {
			this.getDataList()
		},
		methods: {
			// 获取数据
			getDataList() {
				let _rowsData = [{
					name: '1张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '2张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '3张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '4张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '5张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '6张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '7张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '8张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '9张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '10张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '11张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}, {
					name: '12张**',
					money: 500,
					time: '2022-08-18 10:10:10'
				}]

				// 更新
				this.rowsData = _rowsData
			},
			ruleClick() {
				this.goto("/pages/index/bigTurntable/rules/index")
			},
		}
	}
</script>

<style lang="scss">
	.lottery {
		.total {
			border: 1px solid yellow;
			 box-shadow: 0 0 10px yellow;
		}
		.jiangEa{
			background-image: url('');
			background-size: 100% 100%;
			border-radius: 20rpx;
			.item{
				.img{
					width: 100rpx;
					height: 134rpx;
				}
			}
		}
		

		.roundBtn {
			width: 200rpx;
			height: 200rpx;
			line-height: 200rpx;
			border: 1px solid red;
			border-radius: 100rpx;
		}

		.conlbtncenter view {
			--borderWidth: 5px;
			position: relative;
			background-color: white;
			border-radius: 50%;
			width: 180upx;
			height: 180upx;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: red;
			font-weight: bold;
		}

		.conlbtncenter view:after {
			content: '';
			position: absolute;
			top: calc(-1 * var(--borderWidth));
			left: calc(-1 * var(--borderWidth));
			height: calc(100% + var(--borderWidth) * 2);
			width: calc(100% + var(--borderWidth) * 2);
			// 渐变边框颜色
			background: linear-gradient(60deg, #fa374a, #2bc271, #ff8669, #9856fc, #fad86a, #5fd9f9, #4c68ef, #6f43e4);
			border-radius: 50%;
			z-index: -1;
			animation: animatedgradient 3s ease alternate infinite;
			background-size: 300% 300%;
		}

		@keyframes animatedgradient {
			0% {
				background-position: 0% 50%;
			}

			50% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}

		.conlbtn {
			position: relative;
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			margin: 50upx auto;
		}

		.conlbtn .conlbtncenter {
			position: relative;
			z-index: 2;
			font-size: 30upx;
			background: #fff;
			color: #8075ad;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		@keyframes ripples {
			from {
				transform: scale(1);
				opacity: 0.6;
			}

			to {
				transform: scale(1.4);
				opacity: 0;
			}
		}

		.conlitem {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: red;
			border-radius: 50%;
			animation: ripples 2s 0ms linear infinite;
			z-index: 0;
		}

		.conlitem:nth-child(2n) {
			animation-delay: 0.5s;
		}

		.conlitem:nth-child(3n) {
			animation-delay: 1s;
		}
		
		.rightEa{
			position: absolute;
			right: 0;
			top: 100rpx;
			
		}
	}
</style>